<template>
  <ShopLayout>
    <div class="bg-gray-100 min-h-screen">
      <div class="max-w-7xl mx-auto px-8 sm:px-16 lg:px-24 py-20">
        <!-- 页面标题 -->
        <div class="mb-8">
          <h1 class="text-3xl font-light text-gray-900">我的消息</h1>
          <p class="mt-2 text-gray-600">查看系统通知和重要消息</p>
        </div>

        <!-- 筛选器 -->
        <div class="bg-white rounded-2xl p-8 shadow-sm mb-6">
          <div class="flex items-center justify-between mb-6">
            <h3 class="text-xl font-light text-gray-900">筛选条件</h3>
            <button 
              @click="clearFilters"
              class="px-4 py-2 text-sm font-medium text-gray-600 bg-gray-100 rounded-xl hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900 transition-colors"
            >
              <svg class="w-4 h-4 mr-2 inline" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
              </svg>
              重置筛选
            </button>
          </div>
          
          <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <!-- 分类筛选 -->
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-3">消息分类</label>
              <div class="flex flex-wrap gap-2">
                <button
                  @click="updateFilter('category', '')"
                  :class="[
                    'px-4 py-2 rounded-2xl text-sm font-medium transition-colors',
                    !filters.category ? 'bg-gray-900 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
                  ]"
                >
                  全部分类
                </button>
                <button
                  v-for="category in categoryOptions"
                  :key="category.value"
                  @click="updateFilter('category', category.value)"
                  :class="[
                    'px-4 py-2 rounded-2xl text-sm font-medium transition-colors',
                    filters.category === category.value ? 'bg-gray-900 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
                  ]"
                >
                  {{ category.label }}
                </button>
              </div>
            </div>
            
            <!-- 状态筛选 -->
            <div>
              <label class="block text-sm font-medium text-gray-700 mb-3">消息状态</label>
              <div class="flex flex-wrap gap-2">
                <button
                  @click="updateFilter('read', '')"
                  :class="[
                    'px-4 py-2 rounded-2xl text-sm font-medium transition-colors',
                    filters.read === '' ? 'bg-gray-900 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
                  ]"
                >
                  全部状态
                </button>
                <button
                  v-for="status in statusOptions"
                  :key="status.value"
                  @click="updateFilter('read', status.value)"
                  :class="[
                    'px-4 py-2 rounded-2xl text-sm font-medium transition-colors',
                    filters.read === status.value ? 'bg-gray-900 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
                  ]"
                >
                  {{ status.label }}
                </button>
              </div>
            </div>
          </div>
        </div>

        <!-- 批量操作 -->
        <div v-if="selectedIds.length > 0" class="bg-white rounded-2xl p-6 shadow-sm mb-6">
          <div class="flex items-center justify-between">
            <span class="text-sm text-gray-600">已选择 {{ selectedIds.length }} 条消息</span>
            <div class="flex gap-3">
              <button 
                @click="batchMarkAsRead" 
                class="px-6 py-2 text-sm font-medium text-white bg-gray-900 rounded-xl hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900 transition-colors"
              >
                标记已读
              </button>
              <button 
                @click="batchDelete" 
                class="px-6 py-2 text-sm font-medium text-white bg-red-600 rounded-xl hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-600 transition-colors"
              >
                删除
              </button>
            </div>
          </div>
        </div>
        
        <!-- 通知列表 -->
        <div class="space-y-4">
          <div v-for="notification in notifications.data" :key="notification.id"
               class="bg-white rounded-2xl shadow-sm p-6 hover:shadow-md transition-shadow"
               :class="{ 'ring-2 ring-blue-200 bg-blue-50': !notification.read_at }">
            <div class="flex items-start gap-4">
              <input 
                type="checkbox" 
                v-model="selectedIds" 
                :value="notification.id" 
                class="mt-1 h-4 w-4 text-gray-900 focus:ring-gray-900 border-gray-300 rounded"
              />
              <div class="flex-1">
                <div class="flex justify-between items-start mb-3">
                  <h3 class="text-lg font-medium text-gray-900">{{ notification.data.title }}</h3>
                  <span class="text-sm text-gray-500 ml-4">{{ formatDate(notification.created_at) }}</span>
                </div>
                <p class="text-gray-700 mb-4 leading-relaxed">{{ notification.data.content }}</p>
                <div class="flex items-center gap-4">
                  <Link 
                    v-if="notification.data.action_url" 
                    :href="notification.data.action_url"
                    class="inline-flex items-center px-4 py-2 text-sm font-medium text-gray-900 bg-gray-100 rounded-xl hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900 transition-colors"
                  >
                    <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
                    </svg>
                    查看详情
                  </Link>
                  <button 
                    @click="markAsRead(notification.id)" 
                    v-if="!notification.read_at"
                    class="inline-flex items-center px-4 py-2 text-sm font-medium text-gray-600 bg-white border border-gray-300 rounded-xl hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900 transition-colors"
                  >
                    <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                    </svg>
                    标记已读
                  </button>
                  <button 
                    @click="deleteNotification(notification.id)"
                    class="inline-flex items-center px-4 py-2 text-sm font-medium text-red-600 bg-white border border-red-300 rounded-xl hover:bg-red-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-600 transition-colors"
                  >
                    <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                    </svg>
                    删除
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 空状态 -->
        <div v-if="notifications.data.length === 0" class="bg-white rounded-2xl shadow-sm p-12 text-center">
          <svg class="mx-auto h-12 w-12 text-gray-400 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-5 5-5-5h5v-5a7.5 7.5 0 1 0-15 0v5h5l-5 5-5-5h5v-5a7.5 7.5 0 1 0 15 0v5z" />
          </svg>
          <h3 class="text-lg font-medium text-gray-900 mb-2">暂无消息</h3>
          <p class="text-gray-600">您还没有收到任何消息通知</p>
        </div>
        
        <!-- 分页 -->
        <div v-if="notifications.data.length > 0" class="mt-8">
          <Pagination :links="notifications.links" />
        </div>
      </div>
    </div>
  </ShopLayout>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { Head, Link, router } from '@inertiajs/vue3'
import ShopLayout from '@/Layouts/ShopLayout.vue'
import Pagination from '@/Components/Pagination.vue'
import { useNotification } from '@/composables/useNotification'

const props = defineProps({
  notifications: { type: Object, required: true },
  unreadCount: { type: Number, default: 0 },
  filters: { type: Object, default: () => ({}) }
})

const { showSuccess, showError } = useNotification()
const selectedIds = ref([])
const filters = reactive({
  category: props.filters.category || '',
  read: props.filters.read || ''
})

// 分类选项
const categoryOptions = [
  { value: 'system', label: '系统通知' },
  { value: 'order', label: '订单消息' },
  { value: 'after_sales', label: '售后消息' }
]

// 状态选项
const statusOptions = [
  { value: 'false', label: '未读' },
  { value: 'true', label: '已读' }
]

// 格式化日期
const formatDate = (date) => {
  return new Date(date).toLocaleString('zh-CN')
}

// 更新筛选器
const updateFilter = (key, value) => {
  filters[key] = value
  applyFilters()
}

// 清除筛选器
const clearFilters = () => {
  filters.category = ''
  filters.read = ''
  applyFilters()
}

// 应用筛选
const applyFilters = () => {
  router.get(route('notifications.index'), filters, {
    preserveState: true,
    replace: true
  })
}

// 标记单个为已读
const markAsRead = (id) => {
  router.post(route('notifications.mark-as-read'), {
    ids: [id]
  }, {
    preserveState: false,
    onError: (errors) => {
      showError('操作失败', errors.message || '请重试')
    }
  })
}

// 全部标记为已读
const markAllAsRead = () => {
  router.post(route('notifications.mark-all-as-read'), {}, {
    preserveState: false,
    onError: (errors) => {
      showError('操作失败', errors.message || '请重试')
    }
  })
}

// 批量标记为已读
const batchMarkAsRead = () => {
  if (selectedIds.value.length === 0) return
  
  router.post(route('notifications.mark-as-read'), {
    ids: selectedIds.value
  }, {
    preserveState: false,
    onSuccess: () => {
      selectedIds.value = []
    },
    onError: (errors) => {
      showError('操作失败', errors.message || '请重试')
    }
  })
}

// 删除单个通知
const deleteNotification = (id) => {
  router.delete(route('notifications.destroy'), {
    data: { ids: [id] },
    preserveState: false,
    onError: (errors) => {
      showError('操作失败', errors.message || '请重试')
    }
  })
}

// 批量删除
const batchDelete = () => {
  if (selectedIds.value.length === 0) return
  
  router.delete(route('notifications.destroy'), {
    data: { ids: selectedIds.value },
    preserveState: false,
    onSuccess: () => {
      selectedIds.value = []
    },
    onError: (errors) => {
      showError('操作失败', errors.message || '请重试')
    }
  })
}
</script>